<template>
	<view class="app">
		<view style="padding: 20rpx;background-color: #f2f2f2">
		
			<u-grid :col="3">
				<u-grid-item>
					<view>{{userBalance.total_balance}}</view>
					<view class="grid-text">总余额</view>
				</u-grid-item>
				<u-grid-item @click="openUrl('/pages/user/balance/details')">
					<view>{{userBalance.balance}}</view>
					<view class="grid-text">兰亭余额</view>
				</u-grid-item>
				<u-grid-item @click="openUrl('/pages/hxt/balanceLogs')">
					<view>{{userBalance.hxt_balance}}</view>
					<view class="grid-text">恒信通余额</view>
				</u-grid-item>
			</u-grid>
			
		</view>
		
		
		
		<view class="items" v-if="dataList && dataList.length">
			<view class="item" v-for="(item, i) in dataList" :key="i">
				<view class="item-left">
					<view class="desc margin-bottom text-12-pt">{{ item.desc }}</view>
					<view class="date-time text-10-pt">{{ item.created_at }}</view>
				</view>
				<view class="item-right">
					<view class="update margin-bottom text-12-pt" :style="{color:item.type == 1 ?'#FF7104':''}">{{ updateStatus(item.type, item.money) }}</view>
					 <!-- :class="item.type == 1 ? 'add' : 'dot'" -->
					<view class="sum text-10-pt" :style="{color:'#FF7104'}">账户余额：{{ item.balance }}</view>
				</view>
			</view>
			
			<u-loadmore style="padding: 20rpx 0;" :status="loadStatus" />
			
		</view>
		
		<view class="exchange-btn" >
			<view class="btn-child1" @click="openUrl('/pages/cash/balance_cash')">兰亭余额提现</view>
			<view class="btn-child2" @click="openUrl('/pages/hxt/withdrawal')">恒信通余额提现</view>
		</view>
	</view>
</template>

<script>

export default {
	data() {
		return {
			dataList: [],
			pages: {
				total_count: 1,
				page_count: 1,
				pageSize: 10,
				current_page: 1
			},
			loadStatus:'nomore',
			userBalance:{
				total_balance:0,
				balance: 0,
				hxt_balance: 0,
			}
		};
	},
	async onShow(){
		this.initData();
		uni.showLoading({mask:true,title:'请稍后...'});
		await this.getDateList();
		await this.getBalance()
		uni.hideLoading()
	},
	methods: {
		initData(){
			this.dataList = [];
			this.pages = {
				total_count: 1,
				page_count: 1,
				pageSize: 10,
				current_page: 1
			};
		},
		async getDateList() {
			this.loadStatus = 'loading';
			let { current_page, pageSize } = this.pages;
			let res = await this.$http.request({
				url: this.$api.user.balanceDetails,
				method: 'POST',
				data: {page: current_page,limit: pageSize}
			});
			this.loadStatus = 'nomore';
			if(res.code !== 0){
				return this.$http.toast(res.msg);
			}
			let { list, pagination } = res.data;
			this.dataList = this.dataList.concat(list);
			this.pages = pagination;
			if (this.pages.current_page < this.pages.page_count) {
				this.loadStatus = 'loadmore';
			}
		},
		async getBalance(){
			let res = await this.$http.request({
				url: this.$api.user.balance,
				method: 'POST'
			});
			if(res.code !== 0){
				return this.$http.toast(res.msg);
			}
			this.userBalance = res.data;
		},
		
		openUrl(url){
			uni.navigateTo({url})
		},
		updateStatus(type, data) {
			return type == 1 ? `+${data}` : `-${data}`;
		},
	
	},
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
			this.getDateList(_status);
		}, 1000);
	},
	onReachBottom() {
		let { current_page, page_count } = this.pages;
		if (current_page >= page_count) {
			this.loadStatus = 'nomore';
			return;
		}
		this.pages.current_page++;
		this.getDateList();
	}
};
</script>

<style lang="scss" scoped>
.app {
	min-height: 100%;
	background-color: #ffffff;
	color: #000000;

	.app-header-box {
		border-bottom: 4rpx solid #f7f7f7;
	}
}

.items {
	margin: 0 30rpx;
	padding-bottom: 100rpx;
	display: flex;
	flex-direction: column;

	.item {
		display: flex;
		font-size: 9pt;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #ececec;

		.item-left {
			flex: 1;
			max-width: 50%;

			.desc {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			.date-time {
				color: #bdbdbd;
				font-size: 10pt;
			}
		}

		.item-right {
			flex: 1;
			text-align: end;
			.update {
				&.add {
					color: #bc0100;
				}
			}
			.sum {
				color: #bc0100;
			}
		}
	}
}
.margin-bottom {
	margin-bottom: 10rpx;
}
.text-10-pt {
	font-size: 10pt;
}
.text-12-pt {
	font-size: 12pt;
}
.popup-detail{width: 100%;background: #fff;min-height: 400rpx;border-radius: 0 0 20rpx 20rpx;padding-bottom: 30rpx;}
	.popup-detail-header{width: 100%;height: 80rpx;line-height: 80rpx;padding: 0 20rpx;font-size: 30rpx;color: #000;font-weight: bold;}
	.popup-detail-list{width: 100%;overflow: hidden;margin-bottom: 30rpx;}
	.popup-detail-list view{min-width: 180rpx;height: 70rpx;line-height: 70rpx;text-align: center;
	float: left;margin: 20rpx 0rpx 0 40rpx;border-radius: 10rpx;font-size: 26rpx;font-weight: bold;}
	.actove{background: rgb(222,59,45);color: #fff;}
	
	
	.exchange-btn{
		position: fixed;
		z-index: 10;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 90rpx;
		// background:#FF7104;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		// color: #FFFFFF;
		line-height: 90rpx;
		text-align: center;
		letter-spacing: 2rpx;
		display: flex;
		justify-content: space-around;
		.btn-child1{
			background: #FF7104;
			color: #FFFFFF;
			flex:1;
		}
		.btn-child2{
			border: 1px solid #FF7104;
			background: #FFFFFF;
			flex:1;
			color: #FF7104;
		}
	}


	.grid-text{
		font-size: 9pt;
		color:#909399
	}
</style>
